<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="24"><div class="centerTitle">学校信息</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form ref="form" :model="form" label-width="100px" label-position="right">
            <el-form-item label="学校名称：">
              <el-input v-model="this.school_info.title" disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="所属区域：">
              <el-input v-model="this.school_info.address" disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="包含学段：">
             <el-checkbox-group v-model="form.section_id">
                <el-checkbox label="小学" name="type"></el-checkbox>
                <el-checkbox label="初中" name="type"></el-checkbox>
                <el-checkbox label="高中" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="学校类型：">
              <el-radio-group v-model="form.type">
                <el-radio label="一般学校"></el-radio>
                <el-radio label="示范学校"></el-radio>
                <el-radio label="职业学校"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="学校归属：">
              <el-radio-group v-model="form.ascription">
                <el-radio label="省直属学校"></el-radio>
                <el-radio label="市直属学校"></el-radio>
                <el-radio label="直属民办学校"></el-radio>
                <el-radio label="普通公办学校"></el-radio>
                <el-radio label="普通民办学校"></el-radio>
                <el-radio label="其他"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="学生总数：">
              <el-input-number v-model="form.student_total" :min="0"></el-input-number>&nbsp;&nbsp;人
            </el-form-item>
            <el-form-item label="教师总数：">
              <el-input-number v-model="form.teacher_total" :min="0"></el-input-number>&nbsp;&nbsp;人
            </el-form-item>
            <el-form-item label="教师职称：">
              <table class="table" border="1px">
                <tr>
                  <td></td>
                  <td>三级职称</td>
                  <td>二级职称</td>
                  <td>一级职称</td>
                  <td>高级职称</td>
                  <td>特级职称</td>
                </tr>
                <tr>
                  <td class="tableTitle">人数</td>
                  <td><el-input-number v-model="form.teacher_title.three_level_title" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_title.second_level_title" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_title.one_level_title" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_title.senior_level_title" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_title.super_level_title" size="mini" :min="0"></el-input-number></td>
                </tr>
              </table>
            </el-form-item>
            <el-form-item label="教师学历：">
              <table class="table" border="1px">
                <tr>
                  <td></td>
                  <td>高中及以下</td>
                  <td>大专</td>
                  <td>本科</td>
                  <td>硕士</td>
                  <td>博士</td>
                </tr>
                <tr>
                  <td class="tableTitle">人数</td>
                  <td><el-input-number v-model="form.teacher_education.high_school_number" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_education.junior_college_number" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_education.undergraduate_number" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_education.masters_number" size="mini" :min="0"></el-input-number></td>
                  <td><el-input-number v-model="form.teacher_education.doctor_number" size="mini" :min="0"></el-input-number></td>
                </tr>
              </table>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {APISCHOOLGETARCHIVESINFO, APISCHOOLADDARCHIVES} from '@/common/api.js'
export default {
  data () {
    return {
      form: {
        section_id: [],
        type: '',
        ascription: '',
        student_total: '',
        teacher_total: '',
        teacher_title: {
          one_level_title: '',
          second_level_title: '',
          three_level_title: '',
          senior_level_title: '',
          super_level_title: ''
        },
        teacher_education: {
          high_school_number: '',
          junior_college_number: '',
          undergraduate_number: '',
          masters_number: '',
          doctor_number: ''
        }
      },
      school_info: {
        title: '',
        address: ''
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      APISCHOOLGETARCHIVESINFO().then((res) => {
        if (res.status === 1) {
          this.form = res.data.base_info
          this.school_info.title = res.data.school_info.title
          this.school_info.address = res.data.school_info.province_title + '/' + res.data.school_info.city_title + '/' + res.data.school_info.area_title
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    onSubmit () {
      this.form.section_id = this.form.section_id.toString()
      this.form.teacher_title = JSON.stringify(this.form.teacher_title)
      this.form.teacher_education = JSON.stringify(this.form.teacher_education)
      APISCHOOLADDARCHIVES(this.form).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.getData()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="scss">
.table{
  width: 100%;
  text-align: center;
  border: 1px solid #EBEEF5;
}
.table>tr>td{
  padding: 0 10px;
}
.tableTitle{
  width: 50px;
}
</style>
